<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body>
        
        
    </el-dialog>
</template>

<script>
import { queryOrderDetail } from '@/api/orderdeliver'

export default {
    name: 'ProductDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            loading: false,
            model: {
                id: '',
                name: '',
                supply_name: '',
                supply_link: '',
                currency: '',
                shops: {
                    name: '',
                    domain: '',
                    myshopify_domain: '',
                    timezone: '',
                },
                order_customer: {
                    email: '',
                    first_name: '',
                    last_name: '',
                    phone: '',
                    created_at: '',
                },
                order_shipping: {
                    country: '',
                    city: '',
                    name: '',
                    phone: '',
                },
                order_achievement: {
                    subtotal_price: '',
                    discounted_price: '',
                    total_price: '',
                },
            },
            rules: {
                // supply_name: [{ required: true, message: '供应商名称不能为空', trigger: ['blur', 'change'] }],
            },
        }
    },
    computed: {
        title() {
            return `${this.type === 'view' ? '查看' : this.type === 'edit' ? '编辑' : '新增'}订单`
        },
        isDisabled() {
            return this.type === 'view'
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val) {
                    this.model = Object.assign({}, this.model, val)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { order_id: this.params.order_id }
            queryOrderDetail(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style>
.order-page {
    min-height: 100%;
    background: #f1f1f1;
}
.order-header {
    margin-bottom: 24px;
    padding-left: 24px;
}
.header-title .title {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    margin-right: 8px;
}
.order-content {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}
.order-main {
    width: 66%;
    margin-right: 2%;
}
.order-sub {
    width: 32%;
}
.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 0 4px #eee;
}
.card-content {
    margin: 8px 0;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
}
.card-item {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: nowrap;
}
.card-item:last-child {
    border-bottom: 0;
}
.card-item-logo {
    width: 50px;
    height: 50px;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    margin-right: 16px;
}
.card-item-logo .el-image {
    width: 50px;
    height: 50px;
}
.card-item-content {
    flex: 1;
}
.card-item-left,
.card-item-right {
    width: 15%;
}
.card-item-right {
    text-align: right;
}
.text-bold {
    font-weight: bold;
}
.text-primary {
    color: #11a983;
}
</style>
